Router Cache Next.js
TODO
使っていく予定なんだけど、イマイチ、デフォルトの挙動やベストプラクティスがわかっていないので、理解したい。
hr.icon
以下を読み進める。
https://nextjs.org/docs/app/building-your-application/caching#client-side-router-cache
Client-side Router Cache
Next.js には、layout、loading state、pageごとに分割されたRSC payloadのRoute Segment Next.jsを保存する、メモリ内のクライアントサイドルーターキャッシュがある。
q: layout.tsx Next.js、loading.tsx Next.js、page.tsx Next.jsのことなのか概念のことなのか？
ユーザーがRoute ルート Next.js ]間を移動する際、Next.jsは訪問したRoute Segment Next.jsをキャッシュし、ユーザーが移動する可能性の高いRoute ルート Next.jsをprefetch Next.jsする。
これにより、以下をが実現
瞬時の戻る、進むの移動
ナビゲーション間でのフルページリロードの排除
Reactの状態とブラウザの状態の保持
ルーターキャッシュの特徴：
レイアウトはキャッシュされ、ナビゲーション時に再利用される(Partial Rendering Next.js)
ローディング状態はキャッシュされ、瞬時のナビゲーションのために再利用される(Instant Loading States Next.js)
ページはデフォルトではキャッシュされませんが、ブラウザの戻る・進む操作時に再利用される
staleTimes (experimental) Next.jsの設定オプションを使用して、page segment Next.jsのキャッシュを有効にできる。
注目ポイント：ルーターキャッシュは特にNext.jsとReact Server Components RSCに適用され、ブラウザのbfcacheとは異なりますが、同様の結果をもたらします。
感想
つまり、Next.js 15におけるRouter Cacheは、デフォルト、以下ということ？
layout.tsx Next.js: on
loading.tsx Next.js: on
page.tsx Next.js: off
staleTimes (experimental) Next.jsで調整する。
staleTimes (experimental) Next.jsが、experimentalということは名前変わる可能性ありそう。
特に、use cache Next.jsとかで。。。
ブラウザのbfcacheとは異なりますが、同様の結果をもたらします。
q: つまり、bfcacheはオフにしていて独自適応しているみたいなこと？
Duration 持続時間
キャッシュはブラウザの一時メモリに保存される
ルーターキャッシュの持続時間は以下の2つの要因によって決定される
セッション Session web
キャッシュはナビゲーション間で保持
ただし、ページの更新時にクリア
Automatic Invalidation Period cache(自動無効化期間)
レイアウトとローディング状態のキャッシュは、特定の時間後に自動的に無効化
その期間は、以下で決まる。
リソースがどのようにprefetch Next.jsされたか
リソースがStatic Rendering 静的レンダリングされたかどうか
デフォルトのプリフェッチ（prefetch={null}or 未指定）
Dynamic Rendering 動的レンダリングするページではキャッシュされない。
Static Rendering 静的レンダリングするページでは5分間
フルプリフェッチ（prefetch={true} or router.prefetch）
静的・動的ページともに5分間
ページの更新はすべてのキャッシュされたセグメントをクリア
しかし、Automatic Invalidation Period cacheは、prefetch Next.jsされた時点から個々のセグメントにのみ影響
注目ポイント：staleTimes (experimental) Next.jsの設定オプションを使用して、上記の自動無効化時間を調整可能
感想
デフォルトのプリフェッチ（prefetch={null}or 未指定）
Link next/linkって、デフォルト(未指定)でprefetch Next.jsしていると思うんだけど、その場合は、prefetch={null}と同じ挙動ということ？
デフォルトで、prefetch Next.jsされるから、あえてprefetch=trueを書かないのでなく、意図的に書いたほうがいいということ？
Automatic Invalidation Period cache(自動無効化期間)に関して。
layout.tsx Next.jsとloading.tsx Next.jsはデフォルトonで、Link next/linkのprefetchの値で変わるということ?
staleTimes (experimental) Next.jsは、page segment Next.jsのRouter CacheのAutomatic Invalidation Period cacheを決める設定だから、layout.tsx Next.jsとloading.tsx Next.jsの値は変更出来ない感じかな？
page.tsx Next.jsははデフォルトoffで、staleTimes (experimental) Next.jsでonにしつつ、時間も設定。
理解メモ
Router Cache
layout.tsx Next.js/loading.tsx Next.jsは、デフォルトonで、調整不可能？
セッション Session web内での管理
ナビゲーション間で保持されて、ページ更新時にクリア
Automatic Invalidation Period cache(自動無効化期間)での管理
デフォルトのプリフェッチ（prefetch={null}or 未指定）
Dynamic Rendering 動的レンダリングするページではキャッシュされない。
Static Rendering 静的レンダリングするページでは5分間
フルプリフェッチ（prefetch={true} or router.prefetch）
静的・動的ページともに5分間
page segment Next.jsは、デフォルトoffで、staleTimes (experimental) Next.jsで調整
デフォルト値
Dynamic Rendering 動的レンダリングするページではキャッシュされない。
The dynamic property is used when the page is neither statically generated nor fully prefetched (i.e., with prefetch=).
prefetch=trueをしたときのみ、利用できる？
Static Rendering 静的レンダリングするページでは5分間
↑の理解から、Router Cacheを使うためには。
Link next/linkで、prefetch=trueにして、prefetch Next.jsを明示化
page segment Next.jsででもRouter Cacheを利用するために、nuxt.config.jsにて、staleTimes (experimental) Next.jsの時間を設定。
code:next.config.js
const nextConfig = {
experimental: {
staleTimes: {
dynamic: 30, //0から30秒？に変更
static: 180, //300(5分)から180(3分)?に変更
},
},
}
感想
layout.tsx Next.jsかpage.tsx Next.jsかで挙動が変わるから、どちらに記述すべきかはハッキリさせたほうがいいな。
動的なものは、page.tsx Next.jsに寄せたほうがいいのかな？
metaとかパンくずとか。
Invalidation 無効化
ルーターキャッシュを無効化する方法は2つ
Server Actions内で：
パスによるデータのオンデマンド再検証（revalidatePath）またはキャッシュタグによる再検証（revalidateTag）
cookies.setまたはcookies.deleteを使用すると、クッキーを使用するルートが古くなるのを防ぐためにルーターキャッシュが無効化される（認証など）。
router.refreshを呼び出すと、ルーターキャッシュが無効化され、現在のルートに対して新しいリクエストがサーバーに送信されます。
感想
Server Actions内で行う方は、Interactiveな処理とかに使う感じかな？
router.refreshは、多分今見ているページでやるとリロード入りそう？
Opting out オプトアウト
Next.js 15以降、page segment Next.jsはデフォルトでオプトアウト
注目ポイント：Link next/linkのprefetchプロパティをfalseに設定することで、prefetch Next.jsをオプトアウトすることもできます。
補足: Next.js 15のデフォルト挙動
layout.tsx Next.js: on
loading.tsx Next.js: on
page.tsx Next.js: off